<!--
pie-ring
故障件分布子组件
显示环图组件
-->
<template>
    <chart
    :chartId="chartId"
    :options="chartOptions"></chart>
</template>

<script>
import {
    chartFontSize,
} from '@/mixins';

export default {
    name: 'pie-ring',
    mixins: [chartFontSize],
    components: {
        chart: () => import(/* webpackChunkName: "chart" */'@/components/chart'),
    },
    props: {
        // 图表ID
        chartId: {
            type: String,
            required: true,
        },
        // 图表标题
        title: {
            type: String,
            default: '300C',
        },
        // 图表所有数据 需要进一步拆分
        chartData: {
            type: Object,
        },
    },
    computed: {
        // 图例数据
        legendData() {
            return this.chartData.xData ? this.chartData.xData : [];
        },
        // 内环数据
        innerCircle() {
            return this.chartData.yData.y2Data ? this.chartData.yData.y2Data : [];
        },
        // 外环数据
        outCircle() {
            return this.chartData.yData.y1Data ? this.chartData.yData.y1Data : [];
        },
        // 图表配置项
        chartOptions() {
            const {
                size01,
            } = this;
            return {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br>{b}: {c} ({d}%)',
                    textStyle: {
                        fontSize: 14 * size01,
                    },
                },
                color: [
                    '#ffbd4d',
                    '#1826bb',
                    '#1bcf20',
                    '#c138af',
                    '#eb5b0e',
                    '#00b1ff',
                    '#587ef7',
                    '#12c2c2',
                ],
                legend: {
                    data: this.legendData.slice(0, 6),
                    right: '5%',
                    orient: 'vertical',
                    icon: 'circle',
                    align: 'left',
                    type: 'scroll',
                    /* bottom: '5%', */
                    top: 'center',
                    itemGap: 4 * size01,
                    itemWidth: 4 * size01,
                    itemHeight: 4 * size01,
                    formatter(name) {
                        let name1;
                        if (name.length > 4) {
                            name1 = `${name.slice(0, 4)}...`;
                        } else {
                            name1 = name;
                        }
                        return name1;
                    },
                    tooltip: {
                        show: true,
                    },
                    textStyle: {
                        color: '#fff',
                        lineHeight: 1.5,
                        fontSize: 11 * size01,
                    },
                },
                series: [
                    {
                        name: this.title,
                        type: 'pie',
                        selectMode: 'single',
                        radius: [0, '31%'],
                        center: ['37%', '52%'],
                        label: {
                            position: 'inner',
                            fontSize: 12 * size01,
                            formatter: '{c}',
                            color: '#fff',
                            show: true,
                        },
                        tooltip: {
                            formatter: '{a} <br>{b}: {c}',
                        },
                        labelLine: {
                            show: false,
                        },
                        data: this.innerCircle.slice(0, 6),
                        startAngle: 210,
                    },
                    {
                        name: this.title,
                        type: 'pie',
                        selectMode: 'single',
                        radius: ['34%', '53%'],
                        center: ['37%', '52%'],
                        label: {
                            position: 'outside',
                            fontSize: 12 * size01,
                            // formatter: '{b}: \n {d}%',
                            formatter(params) {
                                const {
                                    name,
                                    percent,
                                } = params;
                                let name1;
                                if (name.length > 8) {
                                    name1 = `${name.slice(0, 6)}...`;
                                } else {
                                    name1 = name;
                                }
                                // `${name1}: \n ${percent}%`
                                return `${percent}%`;
                            },
                            color: '#fff',
                            show: true,
                        },
                        tooltip: {
                            formatter: '{b}: \n {d}%',
                        },
                        labelLine: {
                            show: true,
                            length: 2 * size01,
                            length2: 4 * size01,
                            lineStyle: {
                                width: 1 * size01,
                            },
                        },
                        data: this.outCircle.slice(0, 6),
                        startAngle: 210,
                    },
                ],

            };
        },
    },
};
</script>
